<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            // 可以在浏览器的application中查看

            // 本地存储 本地存储只能存储字符串，如果存储对象无法直接使用
            // localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动删除
            // sessionStorage 用于临时保存同一个窗口的数据，当浏览器关闭后数据会删除
            // 两者都是以键值对的方式存储数据

            // 存储数据
            localStorage.setItem('name', 'value');
            // 获取数据
            localStorage.getItem('name');
            // 删除数据
            localStorage.removeItem('name');
            // 清空数据
            localStorage.clear();

            // 例子
            localStorage.setItem('name', 'value');
            console.log(localStorage.getItem('name'));
            localStorage.removeItem('name');
            console.log(localStorage.getItem('name'));

            // 复杂数据类型，需要转换成JSON字符串，才能正确存取
            // JSON.stringify() 将对象转换成字符串 JSON.parse() 将字符串转换成对象
            let obj = {
                name: 'value',
                age: 18
            };
            localStorage.setItem('obj', JSON.stringify(obj));
            console.log(JSON.parse(localStorage.getItem('obj')));

        </script>

    </body>
</html>